<template>
	<view>
		<view>
			<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
				:short="false" scroll @change="changeTabs"></fui-tabs>
		</view>
		<view class="row-center marginTop-50" v-if="MokaList.length == 0">
			<view class="">
				<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
				<view class="text-align-center">
					暂未制作模卡！
				</view>
			</view>
		</view>

		<view v-else>
			<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height: 84vh;">
				<swiper-item v-for="page in tabs.length" :key="page">
					<scroll-view scroll-y :show-scrollbar="false" style="height: 84vh;"
						@scrolltolower="onPullUpLoading()">
						<view v-for="(item,key) in MokaList" :key="key" class="waterfall-item"
							@click.stop="showPhoto(MokaList, key)">
							<image :src="item.MokaOkUrl" mode="widthFix" :style="{width:'100%', display: 'block' }">
							</image>
							<view class="row-between marginTop-20">
								<button class="delete-button moka-button" @click.stop="onDeleteImage(item)">
									删除
								</button>
								<view class="marginRight-10 row">
									<button class="download-button moka-button" @click.stop="showPhoto(MokaList, key)">
										预览/长按下载原图
									</button>
									<button class="share-button moka-button" open-type="share"
										@click.stop="onShareImage(item)">
										分享
									</button>
								</view>
							</view>
						</view>
						<uni-load-more :status="more"></uni-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<fui-gallery :current="currentIndex" :urls="photoUrls" :show="photoShow" @hide="hideGallery"></fui-gallery>

		<view class="publicBottom">
			<button class="sub-btn" style="margin-top: 0;"
				@click="$common.goNavPage('/moka/pages/makeMoka')">我要制作模卡</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						index: 0,
						name: '全部',
						id: -1
					},
					{
						index: 1,
						name: '给自己做的',
						id: 0
					},
					{
						index: 2,
						name: '给别人做的',
						id: 1
					}
				],
				MokaInfo: {},
				MokaList: [],
				ListType: -1,
				artisterID: null,
				page: 1,
				more: '',
				tabIndex: 0,

				// 模卡预览数据
				photoUrls: [],
				photoShow: false,
				currentIndex: 0,
				baseUrl: '',
				sharePic: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.tabIndex = 0;
			this.loadDataOne();
		},
		onShareAppMessage() {
			let mokaUser = this.MokaInfo
			let mokaUrl = JSON.parse(this.MokaInfo.UserPhotos)[0]
			
			let myObj = {
				title: mokaUser.NickName + "的模卡",
				path: "/artistesPages/pages/artister?artisterID=" + this.artisterID + '&launch=1',
				imageUrl: mokaUrl
			}
			return myObj;
		},
		methods: {
			hideGallery() {
				this.photoShow = false;
			},
			showPhoto(photos, index) {
				// console.log(photos);
				var photoUrls = [];
				photos.forEach(item => {
					if (!!item.MokaOkUrl) photoUrls.push(item.MokaOkUrl)
				})

				uni.previewImage({
					current: index,
					urls: photoUrls,
					showmenu: true,
				})
			},
			// 上拉加载
			onPullUpLoading() {
				this.page += 1;
				this.loadData()
			},
			loadDataOne() {
				uni.showLoading({
					title: ''
				})
				this.more = 'loading';
				this.$httpost('/UserCenter/myMoka', {
					ListType: this.ListType,
					page: 1
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) {
						// 过滤掉没有模卡的数据
						this.MokaInfo = res.data.MokaInfo
						this.MokaList = res.data.MokaList
						// .filter(item => !!item.MokaOkUrl)
						this.more = '';
					}
					uni.hideLoading()
				});
			},
			loadData() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myMoka', {
					ListType: this.ListType,
					page: this.page
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) {
						let list = res.data.MokaList.filter(item => !!item.MokaOkUrl)
						if (this.MokaList.length != 0) {
							this.MokaList = [...this.MokaList, ...list];
							if (list.length == 0) this.more = 'onMore';
						} else {
							this.MokaList = list;
							this.more = ''
						}
					}

				});
			},

			tabChange(event) {
				// console.log('event', event)
				this.multiplexingIndex(event.detail.current)
			},
			changeTabs(e) {
				// console.log(e)
				this.multiplexingIndex(e.index)
			},
			multiplexingIndex(index) {
				if (this.tabIndex == index) return;
				this.tabIndex = index
				this.ListType = index - 1;
				this.loadDataOne();
			},

			// 删除
			onDeleteImage(item) {
				uni.showModal({
					title: '确定删除吗？',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$httpost('/UserCenter/mokaDel', {
								MokaID: item.MokaID
							}).then(res => {
								// console.log('moka删除', res)
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									this.loadDataOne()
								}
							})
						}
					}
				})

			},

			// 下载图片
			onDownloadImage(prmams) {
				uni.showLoading()
				uni.downloadFile({
					url: prmams.MokaOkUrl,
					success: downloadFileRes => {
						// console.log('downloadFileRes',downloadFileRes)
						uni.saveImageToPhotosAlbum({
							filePath: downloadFileRes.tempFilePath,
							success: systemRes => {
								uni.hideLoading()
								uni.showToast({
									title: '下载成功',
									icon: "success"
								})
							},
							fail: (systemErr) => {
								uni.hideLoading()
								uni.showToast({
									title: '请点击重新下载',
									icon: "success"
								})
							}
						})
					},
					fail: downloadFileErr => {
						uni.hideLoading()
						uni.showToast({
							title: '请点击重新下载！',
							icon: "error"
						})
					}
				})
			},

			// 分享模卡
			onShareImage(item) {
				console.log('moka', item)
				this.artisterID = item.UserID
				this.sharePic = JSON.parse(item)[0]
				console.log('this.sharePic', this.sharePic)
			},


		}
	}
</script>

<style lang="scss">
	.List {
		background: #FFF;
		padding: 20rpx;
		border-bottom: 1px solid #CCC
	}


	.saveBtns {
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0%;
		right: 0%;
		text-align: center;
	}

	.waterfall-item {
		padding: 15rpx;
	}

	.moka-button {
		font-size: 26rpx;
		border-radius: 50rpx;
		height: 55rpx;
		line-height: 55rpx;
		padding: 0 30rpx;
	}

	.moka-button::after {
		border: none;
	}

	.delete-button {

		margin-left: 10rpx;
		background-color: #e1e1e1;
	}

	.download-button {

		background-color: #FFDD00;
		margin-right: 15rpx;
	}

	.share-button {
		background-color: #FFDD00;
	}

	.publicBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 115rpx;
		background-color: #FFF;
		padding-top: 20rpx;
	}
</style>